<template>
  <div>
    <div class="checkbox-groups">
      <div class="checkbox-content">
        <span class="title" ref="title">{{ title }}</span>
        <div class="sub-title mt-8">Select FMC/CFM event to detect</div>
        <div class="groups">
          <a-radio-group :value="notificationService.fmc" @change="changeFmc">
            <a-radio v-for="item in FmcEventList" :key="item.id" :value="item.name" :style="radioStyle">
              {{ item.name }}
            </a-radio>
          </a-radio-group>
        </div>
        <div class="title mt-16" ref="fmcNotTitle">{{ fmcNotTitle }}</div>
        <div class="groups">
          <a-radio-group :value="notificationService.fmcNot" @change="changeFmcNot">
            <a-radio v-for="item in FmcEventList2" :key="item.id" :value="item.name" :style="radioStyle">
              {{ item.name }}
            </a-radio>
          </a-radio-group>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
  props: {
    // FmcEventList: {
    //   type: Array
    // }
    title: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      fmcValue: null,
      radioStyle: {
        display: 'block',
        height: '30px',
        lineHeight: '30px'
      },
      fmcNotTitle: 'Detect Absence of the above FMC Event'
    };
  },
  computed: {
    ...mapState('emailNotification', ['FmcEventList', 'FmcEventList2', 'notificationService'])
  },
  methods: {
    getTitle() {
      return this.$refs.title.innerHTML
    },
    ...mapMutations('emailNotification', ['setState']),
    changeFmc(e) {
      this.setState({ key: 'notificationService', payload: { ...this.notificationService, fmc: e.target.value } });
    },
    changeFmcNot(e) {
      this.setState({ key: 'notificationService', payload: { ...this.notificationService, fmcNot: e.target.value } });
    }
  }
};
</script>
<style lang="less">
.checkbox-groups {
  .groups {
    display: flex;
    flex-direction: column;
    border: 1px solid #DDDDDD;
    padding: 8px;
    box-sizing: border-box;
    margin-top: 8px;

    /deep/.ant-checkbox-wrapper {
      margin-left: 0;
    }
  }
}
</style>
